<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/source/common/taglib.jsp"%>
<html>
<head>
    <title>模型列表</title>
    <script type="text/javascript" src="${base}/source/js/jquery-1.8.3.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/source/css/jquery-ui.min.css"/>
    <style type="text/css">
        table,table td,table th {
            border: 1px solid gray;
            border-collapse: collapse;
        }
        #info{
            width: 200px;
            height: 170px;
            position: absolute;
            top: 120px;
            left: 260px;
            display: none;
            z-index: 1000;
            border: 1px solid gray;
            background: whitesmoke;
        }
        #overlay { /*遮罩层效果*/
            background: #000;
            filter: alpha(opacity=50); /* IE的透明度 */
            opacity: 0.5;  /* 透明度 */
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 100; /* 此处的图层要大于页面 */
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $('#overlay').height(window.maxHeight);
            $('#overlay').width(window.maxWidth);
        });
        function addProcess(){
            $('#info').show();
            $('#overlay').fadeTo(200,0.5);
        }
        function deployProcess(id){
            window.location.href="${base}/workflow/model/deploy?modelId="+id;
        }
        function editProcess(id) {
            window.location.href="${ctx }/workflow/model/edit?modelId="+id;
        }
    </script>
</head>
<body>
<div id="overlay"></div>
    <div style="width: 100%;height: 300px;border: 1px solid gray">
        <div>
            <button type="button" onclick="addProcess()" style="float: right;height: 30px;width: 60px;margin: 5px;">新增</button>
        </div>
        <table style="width: 100%;height: 280px;position: relative;">
            <thead>
                <tr>
                    <th width="8%">ID</th>
                    <th width="10%">Key</th>
                    <th width="10%">Name</th>
                    <th width="10%">Version</th>
                    <th width="10%">创建时间</th>
                    <th width="12%">最后更新时间</th>
                    <th width="15%">元数据</th>
                    <th width="15%">操作</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach items="${list}" var="ac">
                    <tr align="center">
                        <td>${ac.id}</td>
                        <td>${ac.key}</td>
                        <td>${ac.name}</td>
                        <td>${ac.version}</td>
                        <td><fmt:formatDate value="${ac.createTime}" pattern="yyyy-MM-dd"/></td>
                        <td><fmt:formatDate value="${ac.lastUpdateTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                        <td title="${ac.metaInfo}">
                            <c:if test="${fn:length(ac.metaInfo)>20}">${fn:substring(ac.metaInfo,0,20)}...</c:if>
                        </td>
                        <td>
                            <a href="${base}/modeler.html?modelId=${model.id}" target="_blank">编辑</a>
                            <%--<a style="color: blue;" onclick="javascript:editProcess('${ac.id}')">编辑</a>--%>
                            <a style="color: blue;" onclick="javascript:deployProcess('${ac.id}')">部署</a>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
    </div>
    <div id="info" data-options="modal:true">
        <form id="form" action="${base}/workflow/model/create" method="get">
        <div>
          <label>Name:</label>
          <input id="name" name="name" />
        </div>
        <div>
            <label>Key:</label>
            <input id="key" name="key" />
        </div>
        <div>
            <label>Description:</label>
            <textarea id="description" name="description" ></textarea>
        </div>
        <div>
            <input id="submit" type="submit" value="提交"/>
            <button id="cancel" type="button" onclick="javascript:$('#info').toggle();$('#overlay').toggle()">取消</button>
        </div>
        </form>
    </div>
</body>
</html>
